<#include "/templates/taglibs.ftl" />
<#include "/templates/function.ftl" />
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="${contextPath}/assets/plugins/layui/css/layui.css" media="all" />
        <link rel="stylesheet" href="${contextPath}/assets/css/global.css" media="all">
        <style>
            .layui-card-body{
                height: 300px;
            }
        </style>
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md4">
                            <div class="layui-card">
                                <div class="layui-card-header">折线图</div>
                                <div class="layui-card-body">
                                     <div id="basicLine" style="height:300px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="layui-card">
                                <div class="layui-card-header">柱状图</div>
                                <div class="layui-card-body">
                                     <div id="basicBar" style="height:300px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="layui-card">
                                <div class="layui-card-header">饼状图</div>
                                <div class="layui-card-body">
                                     <div id="basicPie" style="height:300px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="layui-card">
                                <div class="layui-card-header">仪表盘</div>
                                <div class="layui-card-body">
                                     <div id="basicGauge" style="height:300px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="layui-card">
                                <div class="layui-card-header">漏斗图</div>
                                <div class="layui-card-body">
                                     <div id="basicFunnel" style="height:300px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="layui-card">
                                <div class="layui-card-header">雷达图</div>
                                <div class="layui-card-body">
                                     <div id="basicLadar" style="height:300px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md12">
                            <div style="text-align: center; padding: 10px;">
                                <a href="https://echarts.apache.org/examples/zh/index.html" target="_blank">点击前往Echarts查看更多实例</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="${contextPath}/assets/plugins/layui/layui.js"></script>
    <script type="text/javascript" src="${contextPath}/assets/plugins/echart/echarts.js"></script>
    <script>
        layui.use(['layer','jquery'], function(){
            var layer = layui.layer
            ,$ = layui.jquery;
            
            initLineChart();
            
            initBarChart();
            
            initPieChart();
            
            initGaugeChart();
            
            initFunnelChart();
            
            initLadarChart();
            
            //新开窗口
            $('.layui-fluid a[lay-open]').on('click', function(){
                var href = $(this).attr('lay-open');
                var name = $(this).attr('lay-text');
                window.parent.dynamicAddTab(name, '${contextPath}/'+ href);
            })
        })
        
        function initLineChart(){
            var lineChart = echarts.init(document.getElementById('basicLine'));
            var option = {
              title: {
                text: 'ECharts 折线图示例',
                textAlign: 'auto'
              },
              tooltip: {},
              legend: {
                data: ['销量']
              },
              xAxis: {
                  type: 'category',
                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
              yAxis: {
                  type: 'value'
              },
              series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
              ]
            };
            lineChart.setOption(option);
        }
        
        function initBarChart(){
            var barChart = echarts.init(document.getElementById('basicBar'));
            var option = {
              title: {
                text: 'ECharts 柱状图示例',
                textAlign: 'auto'
              },
              tooltip: {},
              legend: {
                data: ['销量']
              },
              xAxis: {
                  type: 'category',
                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
              yAxis: {
                  type: 'value'
              },
              series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'bar'
                }
              ]
            };
            barChart.setOption(option);
        }
        
        function initPieChart() {
            var pieChart = echarts.init(document.getElementById('basicPie'));
            option = {
                title: {
                    text: 'ECharts 饼状图示例',
                    textAlign: 'auto'
                },
                tooltip: {
                  trigger: 'item'
                },
                legend: {
                  orient: 'horizontal',
                  bottom: '20'
                },
                series: [
                  {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                      { value: 1048, name: 'Search Engine' },
                      { value: 735, name: 'Direct' },
                      { value: 580, name: 'Email' },
                      { value: 484, name: 'Union Ads' },
                      { value: 300, name: 'Video Ads' }
                    ],
                    emphasis: {
                      itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  }
                ]
            };
            pieChart.setOption(option);
        }
        
        function initGaugeChart(){
            var gaugeChart = echarts.init(document.getElementById('basicGauge'));
            option = {
                title: {
                    text: 'ECharts 仪表盘示例',
                    textAlign: 'auto'
                },
                tooltip: {
                  formatter: '{a} <br/>{b} : {c}%'
                },
                series: [
                  {
                    name: 'Pressure',
                    type: 'gauge',
                    detail: {
                      formatter: '{value}'
                    },
                    data: [
                      {
                        value: 50,
                        name: 'SCORE'
                      }
                    ]
                  }
                ]
            };
            gaugeChart.setOption(option);
        }
        
        function initFunnelChart(){
            var funnelChart = echarts.init(document.getElementById('basicFunnel'));
            option = {
                title: {
                    text: 'ECharts 漏斗图示例',
                    textAlign: 'auto'
                },
                tooltip: {
                  trigger: 'item',
                  formatter: '{a} <br/>{b} : {c}%'
                },
                legend: {
                  data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order'],
                  orient: 'horizontal',
                  bottom: '20'
                },
                series: [
                  {
                    name: 'Funnel',
                    type: 'funnel',
                    left: '10%',
                    top: 60,
                    bottom: 60,
                    width: '80%',
                    min: 0,
                    max: 100,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    gap: 2,
                    label: {
                      show: true,
                      position: 'inside'
                    },
                    labelLine: {
                      length: 10,
                      lineStyle: {
                        width: 1,
                        type: 'solid'
                      }
                    },
                    itemStyle: {
                      borderColor: '#fff',
                      borderWidth: 1
                    },
                    emphasis: {
                      label: {
                        fontSize: 20
                      }
                    },
                    data: [
                      { value: 60, name: 'Visit' },
                      { value: 40, name: 'Inquiry' },
                      { value: 20, name: 'Order' },
                      { value: 80, name: 'Click' },
                      { value: 100, name: 'Show' }
                    ]
                  }
                ]
            };
            funnelChart.setOption(option);
        }
        
        function initLadarChart(){
            var ladarChart = echarts.init(document.getElementById('basicLadar'));
            option = {
                title: {
                    text: 'ECharts 雷达图示例',
                    textAlign: 'auto'
                },
                legend: {
                  orient: 'horizontal',
                  bottom: '20'
                },
                radar: {
                  // shape: 'circle',
                  indicator: [
                    { name: 'Sales', max: 6500 },
                    { name: 'Administration', max: 16000 },
                    { name: 'Information Technology', max: 30000 },
                    { name: 'Customer Support', max: 38000 },
                    { name: 'Development', max: 52000 },
                    { name: 'Marketing', max: 25000 }
                  ]
                },
                series: [
                  {
                    name: 'Budget vs spending',
                    type: 'radar',
                    data: [
                      {
                        value: [4200, 3000, 20000, 35000, 50000, 18000],
                        name: 'Allocated Budget'
                      }
                    ]
                  }
                ]
              };
            ladarChart.setOption(option);
        }
    </script>
</html>